<template>

  <div>
    <!-- 搜索框 -->

   <van-nav-bar class="position">
      <template #right>
        <div class="cityName" @click="cityList">{{ touterIt + `▼` }}</div>
        <van-search
          v-model="value"
          placeholder="| 🔍请输入小区地址"
        >
          <template #action> </template>
        </van-search>
        <van-icon name="map-marked" size="22" @click="map"/>
        <!-- <van-icon name="search" size="18" /> -->
      </template>
    </van-nav-bar>

<!-- 轮播图 -->

<van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
  <van-swipe-item v-for="item in imgs" :key="item.id">
    <img :src=" 'http://liufusong.top:8080' + item.imgSrc" alt="">
  </van-swipe-item>

</van-swipe>
<!-- 下面的四个图标 -->
<div>
  <van-grid>
  <van-grid-item icon="home-o" text="整租" />
  <van-grid-item icon="friends-o" text="合租" />
  <van-grid-item icon="map-marked" text="地图找房" />
  <van-grid-item icon="balance-list" text="去出租" to="/Add"/>
</van-grid>
</div>
<!-- 租房小组 -->
<hg></hg>
  </div>
</template>

<script >
import hg from './houseGroup.vue'
import { homeImg, houseGroup } from '@/api'
export default {
  data () {
    return {
      imgs: '',
      value: '',
      touterIt: JSON.parse(localStorage.getItem('id')).label || '上海'
    }
  },
  components: {
    hg
  },
  methods: {
    onSearch () {
      console.log(123)
    },
    cityList () {
      this.$router.replace('/CityList')
    },
    map () {
      this.$router.replace('/Map')
    }
  },
  async created () {
    const res = await homeImg()
    // console.log(res)
    this.imgs = res.data.body
    console.log(this.imgs)
    // 租房小组的接口
    const group = JSON.parse(localStorage.getItem('id')).value
    // console.log(group)
    const req = await houseGroup({ area: group })
    // console.log('req:' + req)
    console.log(req)
    localStorage.setItem('xiaoZu', JSON.stringify(req))
  }

}
</script>

<style lang="less" scoped>
img {
  display: block;
    //  height: 212px;
    height: 100%;
    width: 100%;
}
.my-swipe {
  // margin-top: -50px;
}
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
  }
  .cityName {
  background-color: #f7f8fa;
  height: 33.97px;
  width: 80px;
  text-align: center;
  line-height: 33.97px;
}
.van-search {
  padding: 0;
}
.position {
  position: absolute;
  // top: 30px;
      top: 25px;
    width: 100%;
    z-index: 2;
}
/deep/.van-nav-bar__content {
 width: 90%;
}
/deep/ html {
  background-color: red;
  z-index: 9999;
}

</style>
